<template>
	<div>
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
			<el-form ref="appAttrDialogFormRef" :rules="rules" :model="state.ruleForm" size="default" label-width="90px">
				<el-form-item label="属性名称" prop="title">
					<el-input v-model="state.ruleForm.title" placeholder="请输入应用名称" clearable></el-input>
				</el-form-item>
				<el-form-item label="属性类型" prop="attrType">
					<el-select v-model="state.ruleForm.attrType" placeholder="选择属性类型" style="width: 100%">
						<el-option v-for="item in state.dictTypes" :key="item.type" :label="item.title" :value="item.type" />
					</el-select>
					<!-- <el-input v-model="state.ruleForm.content" placeholder="请输入应用名称" clearable></el-input> -->
				</el-form-item>
				<el-form-item label="属性内容" prop="content">
					<Editor
						v-model:get-html="state.editor.htmlVal"
						v-model:get-text="state.editor.textVal"
						:disable="state.editor.disable"
						@update:getHtml="updateHtml"
					/>

					<!-- <el-input v-model="state.ruleForm.attrType" placeholder="请输入应用名称" clearable></el-input> -->
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit(appAttrDialogFormRef)" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="AppAttrDialog">
import { reactive, ref, nextTick, defineAsyncComponent } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { AppAttrApi } from '/@/api/shop/appattr';
import { dictApi } from '/@/api/sys/dict';

import msg from '/@/utils/messageUtils';
const Editor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const appAttrDialogFormRef = ref();
const state = reactive({
	dictTypes: [],
	ruleForm: {
		id: '',
		title: '',
		content: '',
		attrType: '',
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
	editor: {
		htmlVal: '',
		textVal: '',
		disable: false,
	},
});

const rules = reactive<FormRules>({
	title: [{ required: true, message: '请输入属性名称', trigger: 'blur' }],
	attrType: [{ required: true, message: '请输入属性类型', trigger: 'blur' }],
	content: [{ required: true, message: '请输入属性内容', trigger: 'blur' }],
});

const onCancel = () => {
	state.dialog.isShowDialog = false;
};

const queryAttrTypes = () => {
	dictApi()
		.queryByCategory('app')
		.then((res) => {
			console.log('res: ', res);
			state.dictTypes = res.data;
		})
		.catch((e) => {});
};
const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;

	await formEl.validate(async (valid) => {
		if (valid) {
			try {
				if (state.dialog.type === 'add') {
					await AppAttrApi().create(state.ruleForm);
				} else {
					await AppAttrApi().update(state.ruleForm);
				}
				msg().success('success');
				closeDialog();
				emit('refresh');
			} catch (e) {
				msg().error('新增失败');
			}
		}
	});
};
const openDialog = async (type: string, id: string) => {
	queryAttrTypes();
	if (type === 'edit') {
		state.dialog.title = '修改app属性信息';
		state.dialog.submitTxt = '修 改';
		state.dialog.type = 'edit';
		state.ruleForm.id = id;
		const { data } = await AppAttrApi().view(id);

		console.log('datas : ', data);
		state.ruleForm.attrType = data.attrType;
		state.ruleForm.title = data.title;
		state.ruleForm.content = data.content;
		state.editor.htmlVal = data.content;
	} else {
		state.dialog.title = '新增app属性信息';
		state.dialog.submitTxt = '新 增';
		state.dialog.type = type;
		nextTick(() => {
			appAttrDialogFormRef.value.resetFields();
		});
	}
	state.dialog.isShowDialog = true;
};

// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

const updateHtml = (content: any) => {
	state.ruleForm.content = content;
};

defineExpose({ openDialog });
</script>

<style scoped lang="scss"></style>
